<template>
	<div class="xiang-lv">
		<div class="header">{{ $t("base.n2-name") }}</div>

		<div class="body">
			<div class="card">
				<div class="title">{{ $t("index.xl.tab1") }}</div>

				<div class="list">
					<div class="list-item" v-for="(item, index) in list1" :key="index">
						<div class="video-box">
							<el-image class="in" :src="item.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
						</div>
						<span>{{ item.label }}</span>
					</div>
				</div>
			</div>
			<div class="card">
				<div class="title">{{ $t("index.xl.tab2") }}</div>

				<div class="list">
					<div class="list-item" @click="handlePlayVideo(item)" v-for="(item, index) in list2" :key="index">
						<div class="video-box">
							<el-image class="in" :src="item.img" fit="cover" />
							<IEpVideoPlay color="#fff" />
						</div>
						<span>{{ item.label }}</span>
					</div>
				</div>
			</div>
		</div>
		<div class="more" @click="pageJump('/xiang-lv/detail')">{{ $t("index.more") }}</div>
	</div>
</template>
<script setup lang="ts">
import { PVideo } from "@/components/interface";
import { useVR } from "@/hook/useVR";
import { useBaseStore } from "@/store/base";
import { useI18n } from "vue-i18n";
const i18n = useI18n();
const { cosPrefix } = useBaseStore();
const { pageJump } = useVR();
const list1 = computed(() => [
	{ label: i18n.t("index.xl.t1-name1"), img: cosPrefix + "three-level/xianglv/xialianfan/xiannvshanjiedao/1.1.1.jpg" },
	{ label: i18n.t("index.xl.t1-name2"), img: cosPrefix + "three-level/xianglv/xialianfan/xiannvshanjiedao/2.2.jpg" }
]);
const list2 = computed(() => [
	{
		label: i18n.t("index.xl.t2-name1"),
		img: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/1.png",
		video: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/1.mp4"
	},
	{
		label: i18n.t("index.xl.t2-name2"),
		img: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/2.png",
		video: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/2.mp4"
	}
]);

const playPreviewVideo = inject("playVideo") as (res: PVideo) => void;
const handlePlayVideo = (video: any) => {
	playPreviewVideo({ title: video.label, src: video.video });
};
</script>
<style lang="scss" scoped>
.xiang-lv {
	position: relative;
	z-index: 9;
}
.header {
	margin-top: 60px;
	font-size: 36px;
	font-weight: bold;
	color: rgb(51 51 51 / 100%);
	text-align: center;
}
.body {
	position: relative;
	z-index: 9;
	display: flex;
	justify-content: center;
	padding: 40px 320px;
	.card {
		flex: 1;
		margin-right: 24px;
		&:last-child {
			margin-right: 0;
		}
		.title {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-family: SourceSerif;
			font-size: 16px;
			font-weight: bold;
			color: $theme-color;
			border-bottom: 1px solid $theme-color;
			&::after {
				width: 112px;
				height: 6px;
				margin-top: 8px;
				margin-bottom: -3px;
				content: "";
				background-color: $theme-color;
			}
		}
		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.list-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 35px;
				.el-image {
					width: 296px;
					height: 212px;
					margin-bottom: 20px;
				}
			}
		}
	}
}
.footer {
	padding-bottom: 4px;
	font-size: 18px;
	color: #333333;
	text-align: center;
	text-decoration: underline;
}

@media all and (max-width: 750px) {
	.header {
		margin-top: 0;
		font-size: 28px;
	}
	.body {
		flex-direction: column;
		padding: 16px;
		.card {
			margin-top: 16px;
			margin-right: 0;
			.list {
				.list-item {
					width: 47.5%;
					margin-right: 5%;
					.video-box {
						width: 100%;
					}
					.el-image {
						width: 100%;
					}
					&:nth-child(2n) {
						margin-right: 0;
					}
				}
			}
		}
	}
}
</style>
